import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import "./login.less";
import logo from "../../assets/images/study.png";
import { connect } from "react-redux";
import { Form, Input, Button, Checkbox, Flex } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { login } from "@/redux/actions";

const Item = Form.Item; //不可以写在import里面

// 登录的路由组件
class Login extends Component {
  onFinish = async (values) => {
    //请求登录
    //解构出来username和password
    const { username, password } = values;
    //调用分发异步action的函数=>发登陆的异步的请求，有了结果后更新状态
    this.props.login(username, password)
  };
  render() {
    //如果用户已经登录了自动跳转到管理界面 
    const user = this.props.user;  //此处本该使用redux的user但是出现了问题--后期解决
    if (user && user._id) {
      return <Redirect to="/home" />
    }

    return (
      <div className="login">
        <header className="login-header">
          <img src={logo} alt="logo" />
          <h1>React项目：后台管理系统</h1>
        </header>
        <section className="login-content">
        <div className={user.errorMsg ? 'error-msg show' : 'error-msg'}>{user.errorMsg}</div>
          <h2>用户登录</h2>
          <Form
            name="login"
            initialValues={{
              remember: true,
              username: "admin",
              password: "admin",
            }}
            style={{ maxWidth: 360 }}
            onFinish={this.onFinish}
          >
            <Item
              name="username"
              rules={[
                {
                  required: true,
                  whitespace: true,
                  message: "Please input your Username!",
                },
                { min: 4, message: "用户名至少四位" },
                { max: 12, message: "用户名最多12位" },
                {
                  pattern: /^[a-zA-Z0-9_]+$/,
                  message: "用户名必须是英文，数字或下划线组成",
                },
              ]}
            >
              <Input prefix={<UserOutlined />} placeholder="Username" />
            </Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: "Please input your Password!",
                },
              ]}
            >
              <Input
                prefix={<LockOutlined />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>
            <Form.Item>
              <Flex justify="space-between" align="center">
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox>Remember me</Checkbox>
                </Form.Item>
                <a href="/#" rel="noreferrer">
                  Forgot password
                </a>
              </Flex>
            </Form.Item>

            <Form.Item>
              <Button block type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    );
  }
}

/**
 * 1.前台表单验证
 * 2.收集表单输入数据
 */
export default connect(
  state => ({ user: state.user }),
  { login }
)(Login)
